<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<!-- data和el的两种写法
el：
    1.   .new Vue的时候配置el的属性
    2.   先创建Vue实例，随后再通过vm.$mount('#root')手动指定容器元素
data：
    1.   对象式
    2.   函数式
    学到组件时，data必须是函数式，不然报错
重要原则：
有vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this指向会变成window，就不再是vue实例对象了 -->

</head>

<body>
    <div id="root">{{name}}</div>

</body>
<script>
    new Vue({
        el: '#root',
        // data: {
        //     name: '张三',     第一种： 对象式
        //     age: 18
        // }
        data:function(){
            console.log(this);  //此处的this是vue实例对象，箭头函数式this是window，箭头函数没有this，所以是windows
            return{             //第二种：函数式
                age:18,               
                name:"张三三",        
            }
        }
    })

    // let a = new Vue({
    //     // el:'#root', 第一种写法
    //     data: {
    //         name: '张三',
    //         age: 18
    //     }
    // })

    // a.$mount('#root') //第二种写法
    // // setInterval(() => {
    // //     a.$mount('#root')

    // // }, 1000)

</script>

</html>